<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 上面的卡片 -->
      <div class="form">
        <el-card class="courseSelection">
          <div class="leftList">
            <el-form
              :label-position="labelPosition"
              label-width="80px"
              :model="formLabelAlign"
              class="left"
            >
              <el-form-item label="标签名称">
                <el-input v-model="formLabelAlign.name"></el-input>
              </el-form-item>
              <el-form-item label="创建者">
                <el-input v-model="formLabelAlign.region"></el-input>
              </el-form-item>
              <el-form-item label="创建日期">
                <el-input v-model="formLabelAlign.region"></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="formLabelAlign.region" placeholder="请选择">
                  <el-option label="禁用" value="shanghai"></el-option>
                  <el-option label="启动" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div class="rightList">
            <el-button type="primary">搜索</el-button>
            <el-button>清除</el-button>
            <el-button type="primary">+新增标签</el-button>
          </div>
        </el-card>
         <!-- 下面的卡片 -->
        <el-card>
          <el-table style="width: 100%">
            <el-table-column label="序号" width="80"> </el-table-column>
            <el-table-column label="所属学科" width="250"> </el-table-column>
            <el-table-column label="标签名称" width="300"> </el-table-column>
            <el-table-column label="创建者" width="300"> </el-table-column>
            <el-table-column label="创建日期" width="300"> </el-table-column>
            <el-table-column label="状态" width="300"> </el-table-column>
            <el-table-column fixed="right" label="操作" width="180">
              <template>
                <el-button>编辑</el-button>
                <el-button type="text" size="small">启动</el-button>
                <el-button type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              :page-sizes="[10, 20, 30, 40]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="40"
            >
            </el-pagination>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      labelPosition: "right",
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
        created: ""
      }
    };
  }
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  width: 100%;
  height: 100%;
  background-color: 240, 242, 245;
  .app-container {
    padding: 10px;
  }
  .form {
    background-color: #ccc;
    height: 1200px;
    padding: 0;
    .courseSelection {
      .leftList {
        float: left;
        .left {
          display: flex;
          margin-right: 15px;
        }
      }
    }
    .block {
      text-align: center;
    }
  }
}
</style>
